<template>
  <view class="wrapper">
    <view class="tab-list">
      <view
        v-for="(item, index) in list"
        :key="index"
        :class="['list-item', index === current ? 'active' : '']"
        @click="current = index"
      >
        {{ item }}
      </view>
    </view>
    <swiper class="swiper" :current="current" @change="({ detail }) => (current = detail.current)">
      <swiper-item class="swiper-item">
        <block v-for="(item, index) in reportList1" :key="index">
          <ReportItem :info="item" />
        </block>
      </swiper-item>
      <swiper-item class="swiper-item">
        <block v-for="(item, index) in reportList2" :key="index">
          <ReportItem :info="item" />
        </block>
      </swiper-item>
      <swiper-item class="swiper-item">
        <block v-for="(item, index) in reportList3" :key="index">
          <ReportItem :info="item" />
        </block>
      </swiper-item>
    </swiper>
    <view class="footer">
      <navigator class="btn" url="/pages/report/index">我要上报</navigator>
    </view>
  </view>
</template>

<script>
import { getHistoryList } from '@/api';
import ReportItem from './components/reportItem/index.vue';
export default {
  components: { ReportItem },

  data() {
    return {
      current: 0,
      list: ['未受理', '处理中', '已结案'],
      reportList1: [],
      reportList2: [],
      reportList3: [],
    };
  },

  onLoad() {
    this.getHistoryList();
  },

  methods: {
    getHistoryList() {
      const params = {
        start: 1,
        end: 99,
      };
      getHistoryList(params).then((res) => {
        const reportList = res.data || [];
        this.reportList1 = reportList.filter((item) => item.status === '未受理');
        this.reportList2 = reportList.filter((item) => item.status === '处理中');
        this.reportList3 = reportList.filter((item) => item.status === '已结案');
      });
    },
  },
};
</script>

<style lang="less" scoped>
@import '@/uni.less';
.wrapper {
  height: 100vh;
  padding-bottom: calc(30rpx + 100rpx + 30rpx + env(safe-area-inset-bottom));
  box-sizing: border-box;
  .tab-list {
    display: flex;
    justify-content: space-around;
    height: 80rpx;
    line-height: 80rpx;
    background-color: #fff;
    .list-item {
      flex: 1;
      text-align: center;
      &.active {
        position: relative;
        &::after {
          position: absolute;
          content: '';
          left: 50%;
          bottom: 0;
          transform: translateX(-50%);
          width: 50%;
          height: 4rpx;
          background-color: @uni-color-primary;
        }
      }
    }
  }
  .swiper {
    height: calc(100% - 80rpx);
    .swiper-item {
      height: 100%;
      overflow: auto;
    }
  }
}
</style>
